<script setup>
import UserApis from '@/apis/user.js'
import SuggestionDialog from "@/views/help/components/SuggestionDialog.vue";
import {ArrowRight, Back} from "@element-plus/icons-vue";
import RightIcon from "@/components/common/RightIcon.vue";
import Document_icon from '@/assets/images/document_icon.png'

const items1 = ref([{
  type: 'pc',
  name: 'pc端使用教程'
}, {
  type: 'app',
  name: 'APP端使用教程'
}])
const activeIndex = ref(0)
const selectItem= ref(null)
const items2 = [{
  name: '电话客服',
  img: '',
  content: '专业的人工电话服务热线竭诚为您服务'
}, {
  name: '报名咨询',
  img: '',
  content: '解答课程、题库、书籍、优惠等在购买过程中产生的相关问题'
}, {
  name: '售后客服',
  img: '',
  content: '提供课程退换、服务协议、资料下载等问题的答疑服务 '
}, {
  name: '技术支持',
  img: '',
  content: '若出现课程播放失败、离线无法下载等程序问题，请反馈给技术人员恢复'
}, {
  name: '意见反馈',
  img: '',
  content: '非常欢迎您提出宝贵的意见和建议，我们想为您做得更好',
  btn_txt: "点击填写"
}]
const suggestion = ref(null)
const loading = ref(false)
const showMore = ref(false)

function init() {
  loading.value = true
  UserApis.getHelp(items1.value[0].type).then(res => {
    const resData=transformTreeData(res.data)
    items1.value[0].children = resData[0].children
    items1.value[0].id=resData[0].id
  }).finally(() => {
    loading.value = false
  })
  UserApis.getHelp(items1.value[1].type).then(res => {
    const resData=transformTreeData(res.data)
    items1.value[1].children = resData[0].children
    items1.value[1].id=resData[0].id
  })
}

function toggle(index) {
  if (activeIndex.value == index) return;
  activeIndex.value = index
  if (items1.value[index].children) {
    return;
  }
  UserApis.getHelp(items1.value[activeIndex.value].type).then(res => {
    items1.value[activeIndex.value].children = transformTreeData(res.data)[0].children
  })

}

// 递归组装,这里只有三层
function transformTreeData(data) {
  let arr = []
  let arr1 = []
  for (let i = 0; i < data.length; i++) {
    if (data[i].level == 0) {
      data[i].children = []
      arr.push(data[i])
    } else if (data[i].level == 1) {
      data[i].children1 = []
      arr1.push(data[i])
      arr.find(e => {
        return e.id == data[i].parentId
      }).children.push(data[i])
    } else {
      arr1.find(e => {
        return e.id == data[i].parentId
      }).children1.push(data[i])
    }
  }
  return arr
}

function ask() {
  window.open("https://work.weixin.qq.com/kfid/kfc4d5c47ec0d5a0db2", '_blank')
}

function showSuggestionDialog() {
  suggestion.value.openDialog()
}

function moreQuestion(index) {
  // activeIndex1.value = index
  selectItem.value = items1.value[activeIndex.value].children[index]
  showMore.value = true
}
function currentChange(data,node){
  selectItem.value =data
  activeIndex.value = items1.value.findIndex((item) => {
    return item.id == data.parentId
  })
}

init()

</script>

<template>
  <div>
    <div class="help-container" v-loading="loading">
      <template v-if="!showMore">
        <div class="one">
          <div class="header">
            <div class="icon"></div>
            <span>问题分类</span>
          </div>
          <div class="content1">
            <div class="items1">
              <div v-for="item,index in items1" :key="item.type" :class="{active:activeIndex==index}" class="item1"
                   @click="toggle(index)">
                <span>{{ item.name }}</span>
              </div>
            </div>
            <div class="items1-children">
              <div @click="moreQuestion(index)" class="a" v-for="item,index in items1[activeIndex].children"
                   :key="index">
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="two">
          <div class="header">
            <div class="icon"></div>
            <span>更多方式</span>
          </div>
          <div class="content2">
            <div v-for="item,index in items2" :key="index" class="box1">
              <div class="inner">
                <div class="a">{{ item.name }}</div>
                <div class="b">{{ item.content }}</div>
                <div class="c">
                  <div class="btn1" @click="ask" v-if="!item.btn_txt">立即咨询</div>
                  <div class="btn1" @click="showSuggestionDialog" v-else>{{ item.btn_txt }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="more-info">
          <div class="my-tree">
            <el-button :icon="Back" text type="primary" @click="showMore = false">返回</el-button>
            <el-tree node-key="id" default-expand-all :icon="RightIcon" :current-node-key="selectItem.id"
                     highlight-current :data="items1" :props="{children: 'children', label: 'name'}"
                     :default-expand-all="true" @current-change="currentChange">
              <template #default="{ node, data }">
                <div v-if="data.children"> {{data.name}}</div>
                <div v-else class="document-container">
                  <img :src="Document_icon" >
                  <span>{{data.name}}</span>
                </div>
              </template>

            </el-tree>
          </div>
          <el-scrollbar class="my-scroll" height="600">
            <div class="padding-16">
              <el-breadcrumb :separator-icon="ArrowRight" >
                <el-breadcrumb-item >{{items1[activeIndex].name}}</el-breadcrumb-item>
                <el-breadcrumb-item >{{selectItem.name}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="content3">
              <div v-for="item in selectItem.children1" :key="item.id" class="item-a">
                <div class="a-icon"></div>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </el-scrollbar>

        </div>
      </template>

      <SuggestionDialog ref="suggestion"/>
    </div>
  </div>
</template>

<style scoped>
.help-container {
  width: 1400px;
  margin: 0 auto;
}

.one {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header .icon {
  width: 3px;
  height: 18px;
  background: red;
}

.content1 {
  display: flex;
  gap: 20px;
  flex-direction: column;
}

.content1 .items1 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.content1 .items1 .item1 {
  background: white;
  box-sizing: border-box;
  border: 1px solid #EEEDEC;
  padding: 2px 8px;
  border-radius: 14px;
  cursor: pointer;
}

.content1 .items1 .item1.active {
  background: linear-gradient(to right, #EB6250, #E51F1A);
  background: #3C6CFF;
  color: white;
}

.items1-children {
  display: flex;
  gap: 20px;
}

.items1-children .a {
  width: 200px;
  height: 100px;
  border-radius: 12px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  cursor: pointer;

  font-size: 24px;
  font-weight: 700;
  transition: all 0.3s;
}

.items1-children .a:hover {
  transform: translateY(-5px);
}

.two {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px 0;
}

.content2 {
  display: flex;
  align-items: center;
  gap: 26px;
}

.box1 {
  background: #EDF2FA;
  border-radius: 12px;
  padding: 16px;
  flex: 1;
}

.inner {
  background: white;
  border-radius: 10px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 260px;
}

.inner .a {
  font-size: 24px;
}

.inner .b {
  font-size: 18px;
  line-height: 20px;
}

.btn1 {
  display: inline-block;
  border: 1px solid #EEE;
  background: #3C6CFF;

  color: white;
  font-size: 20px;
  cursor: pointer;
  border-radius: 20px;
  padding: 2px 16px;
}

.more-info {
  display: flex;
  gap: 16px;
}

.my-tree {
  min-width: 200px;
  padding: 16px;
  background: white;
  border-radius:12px ;
}

.content3 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
}
.content3 .item-a{
  display: flex;
  align-items: center;
  gap: 16px;
}
.content3 .a-icon{
  width: 4px;
  height: 4px;
  flex-shrink: 0;
  border-radius: 2px;
  background: #3C6CFF;
}
.my-scroll {
  flex: 1;
  background: white;
  border-radius: 12px;
}
.document-container{
  display: flex;
  align-items: center;
  gap: 5px;
}
.document-container img{
  width: 14px;
  height: 17px;
}
.padding-16{
  padding: 16px;
}
</style>